<!-- 
  watch 的 flush 配置项的 三个选项的区别：

    1. pre
      异步执行回调
      执行时机在真实DOM更新之前
    2. post
      异步执行回调
      执行时机在真实DOM更新之后
    3. sync
      同步执行回调，只要监听的数据源有改动，会立刻执行回调。
      执行时机在真实DOM更新之前
      它一般使用不上，而且会有一定的性能损耗。

 -->

<template>
  <div>
    <h1>App</h1>

    <p>{{ count }}</p>

    <button @click="fn1">点我</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(1)

    watch(
      count,
      (newVal, oldVal) => {
        console.log('count', newVal, oldVal)
      },
      {
        flush: 'sync', // 同步的触发回调
      }
    )

    const fn1 = () => {
      count.value++
      console.log('123')
      count.value = 100
    }

    return {
      count,
      fn1,
    }
  },
}
</script>
